import { useFrame } from '@react-three/fiber';
import React, { useRef } from 'react';

import Cloud from '../Cloud';

const clouds: React.ReactNode[] = [];
const cloudCount = 25;
const stepAngle = (Math.PI * 2) / cloudCount;
for (let index = 0; index < cloudCount; index++) {
  const a = stepAngle * index;
  const h = 800 + Math.random() * 200;
  const y = Math.sin(a) * h;
  const x = Math.cos(a) * h;
  clouds.push(
    <Cloud
      key={index}
      position={[x, y, -400 - Math.random() * 400]}
      rotation-z={a + Math.PI / 2}
      scale={1 + Math.random() * 2}
    />,
  );
}

const Sky = () => {
  const land = useRef<THREE.Group>(null);
  useFrame((state, delta) => {
    if (land.current) {
      land.current.rotation.z += delta * 0.1;
    }
  });
  return (
    <group ref={land} position-y={-600}>
      {clouds}
    </group>
  );
};

export default Sky;
